<template>
    <div class="person">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <h2>性别{{ gender }}</h2>
        <button @click="changePersonName()">修改姓名</button>
        <button @click="changePersonSex()">修改性别</button>
    </div>

</template>

<script setup lang="ts" name="Person">
    import { reactive,toRef,toRefs } from 'vue';
    let Person=reactive({"name":"张三","age":22,"gender":"男"})
    // toRefs用法，可以将结构出来的数据，具备响应式的能力
    let {name,age}=toRefs(Person)
    // toRef与toRefs功能一致，只不过，toRefs可以批量处理，toRef只能够处理一项数据
    let gender=toRef(Person,"gender")
    function changePersonName(){
        console.log(name)
        name.value+="~"
    }
    function changePersonSex(){
        gender.value="女"
    }




</script>
<style>
.person{
    background-color: lightseagreen;
	box-shadow: 6px 6px 12px gray;
	border-radius: 6px;
	line-height: 40px;
	padding:10px;

}
</style>